<template>
    <div class="layout-pd">
        <el-card shadow="hover" header="作业" class="mt15">
            <div class="flex-warp">
                <Auth :value="'btn.add'">
                    <div class="flex-warp-item">

                        <div class="flex-warp-item-box">
                            <el-table :data="state.tableData.data">
                                <el-table-column prop="uploadtime" :formatter="getLocalTime" label="提交时间" width="300" />
                                <el-table-column prop="name" label="作业命名" width="300" />
                                <el-table-column prop="sno" label="学号" width="200" />
                                <el-table-column prop="state" label="状态" width="200" />
                                <el-table-column label="操作" width="300">
                                    <template #default="scope">
                                        <div>
                                            <el-tooltip class="item" effect="dark" content="审核不通过"
                                                placement="top-start">
                                                <el-button type="danger" v-show="!data.show" :icon="CircleCloseFilled"
                                                    @click="successf('审核未通过', scope)" circle />
                                            </el-tooltip>

                                            <el-tooltip class="item" effect="dark" content="审核通过" placement="top-start">
                                                <el-button type="success" v-show="!data.show" :icon="Check" circle
                                                    @click="successf('审核通过', scope)" />
                                            </el-tooltip>

                                            <el-tooltip class="item" effect="dark" content="合格" placement="top-start">
                                                <el-button type="success" v-show="data.show" :icon="Check" circle
                                                    @click="successf('合格', scope)" />
                                            </el-tooltip>

                                            <el-tooltip class="item" effect="dark" content="打回" placement="top-start">
                                                <el-button type="danger" v-show="data.show" :icon="CircleCloseFilled"
                                                    @click="successf('打回', scope)" circle />
                                            </el-tooltip>

                                            <el-tooltip class="item" effect="dark" content="下载" placement="top-start">
                                                <el-button type="info" :icon="Download" circle
                                                    @click="dowloadfile(scope.row.scriptFile)" />
                                            </el-tooltip>
                                        </div>
                                    </template>
                                </el-table-column>

                            </el-table>
                            <div style="display:flex; justify-content:flex-start ">
                                <el-pagination background layout="prev, pager, next" :total="state.tableData.total"  :current-page="state.tableData.param.pageNum"
                               :page-size="state.tableData.param.pageSize"  @current-change="page"  />
                            </div>

                        </div>

                    </div>
                </Auth>
            </div>

        </el-card>
    </div>


</template>

<script setup lang="ts" name="noPower">
import { Session } from '/@/utils/storage';
import { ref, reactive, } from 'vue'
import { scriptApi } from '/@/api/script/index'
import { onMounted } from 'vue';
import { Check, CircleCloseFilled, Download } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';

const state = reactive<SysRoleState>({
    tableData: {
        data: [],
        total: 100,
        loading: false,
        param: {
            user: JSON.parse(localStorage.getItem("user") || '{}'),
            file: "",
            name: "",
            images: "",
            search: "",
            pageNum: 1,
            pageSize: 10,
            upstete: [],
            pagetotal:0,
            showPage:true

        },

    },
});
//自定义参数
const data = {
    hid: JSON.parse(localStorage.getItem('hid') || '{}'),
    state: '',
    state1: '',
    show: false,
    loginId: 0,
    name: "",
    pageIndex:1,
    pageSize:10,
   
}

//格式化后端返回来的时间
function getLocalTime(value: any) {
    let time = value.uploadtime[0] + '-' + value.uploadtime[1] + '-' + value.uploadtime[2] + ' ' + value.uploadtime[3] + ':' + value.uploadtime[4] + ':' + value.uploadtime[5]
    return time
}

//分页参数的设置
function page(value:any){
    state.tableData.param.pageNum=value
    data.pageIndex=value
    getAllscript()

}

//获取后端所有script的作业并分页
let user = JSON.parse(localStorage.getItem("user") || '{}')
const getAllscript = async () => {
    let role = user.role
    //老师只看审核通过和合格的
    if (role == 0) {
        data.state = "审核通过"
        data.state1 = "合格"
        scriptApi().getScrip(data).then(res => {
            state.tableData.data = res.data.records;
            state.tableData.total=res.data.total;
            data.show = true
        })
    } else {
        //审核员只能看待审核和审核通过的
        data.state = "待审核"
        data.state1 = "审核通过"
        scriptApi().getScrip(data).then(res => {
            state.tableData.data = res.data.records;
            state.tableData.total=res.data.total;
        })
    }
}


//下载文件
const dowloadfile = async (scriptFile?: any) => {
    window.open(scriptFile)
}


//审核员修改状态
const successf = async (content?: any, scope?: any) => {
    data.loginId = scope.row.loginId
    data.name = scope.row.name
    data.state = content
    scriptApi().updatesctate(data)
    getAllscript()
    //点击后刷新当前页面
    ElMessage(`${content}`);
    location.reload()
}


// const onSetAuth = () => {
//     // https://gitee.com/lyt-top/vue-next-admin/issues/I5C3JS
//     // 清除缓存/token等
//     Session.clear();
//     // 使用 reload 时，不需要调用 resetRoute() 重置路由
//     window.location.reload();

// };


//页面加载时去执行
onMounted(() => {
    getAllscript()
})
</script>

<style scoped lang="scss">
.flex-warp {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin: 0 -5px;

    .flex-warp-item {
        padding: 5px;

        .flex-warp-item-box {
            width: 100%;
            height: 100%;
        }
    }
}

.error {
    height: 100%;

    .error-flex {
        margin: auto;
        display: flex;
        height: 450px;
        width: 1050px;

        .left {
            flex: 1;
            height: 100%;
            align-items: center;
            display: flex;

            .left-item {
                .left-item-animation {
                    opacity: 0;
                    animation-name: error-num;
                    animation-duration: 0.5s;
                    animation-fill-mode: forwards;
                }

                .left-item-num {
                    color: var(--el-color-info);
                    font-size: 55px;
                }

                .left-item-title {
                    font-size: 20px;
                    color: var(--el-text-color-primary);
                    margin: 15px 0 5px 0;
                    animation-delay: 0.1s;
                }

                .left-item-msg {
                    color: var(--el-text-color-secondary);
                    font-size: 12px;
                    margin-bottom: 30px;
                    animation-delay: 0.2s;
                }

                .left-item-btn {
                    animation-delay: 0.2s;
                }
            }
        }

        .right {
            flex: 1;
            opacity: 0;
            animation-name: error-img;
            animation-duration: 2s;
            animation-fill-mode: forwards;

            img {
                width: 100%;
                height: 100%;
            }
        }


    }
}
</style>
